<template>
    <div class="container">
    <div class="search-box">
      <van-search
        :value='paramsData.keyword'
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox"
      >
        <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div class="height-44"></div>
    <div class="main">
      <div class="main-bar pull-refresh">
        <div>
          <div class="shop-bar" v-for="(item, index) in listData" :key="index" @click="pageTo(item)">
            <div class="img-item-box">
              <img v-if="item.mainImage" :src="item.mainImage" mode="aspectFill" class="img-item"/>
              <!-- <img v-if="categoryType===2" :src="item.mainImage + '?imageView2/1/w/300/h/300'" mode="aspectFill" class="img-item"/> -->
            </div>
            <div class="content-item-box">
              <div class="content-title line-2">{{item.title}}</div>
              <div class="content-foot">
                <div v-if="item.distributeIncome > 0">
                  <div class="self-buy">
                    <div class="self-buy-left">分销</div>
                    <div class="self-buy-right">省<span style="color:#ffe200;">{{item.distributeIncome}}</span>元</div>
                  </div>
                </div>
                <div class='price-row'>
                  <div class="price-box">
                    <!-- <span v-if="categoryType===1" class='price'>¥{{ item.price }}</span>
                    <span v-if="categoryType===2" class='price'>¥{{ item.sellPrice }}</span> -->
                    <span class='price'>¥{{ item.sellPrice }}</span>
                    <span class="old-parice" v-if="item.scribingPrice">￥{{ item.scribingPrice }}</span>
                  </div>
                  <div class="btn-box" @click="upperGoods(item)">
                    <div class="btn">+上架</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nodata" v-if="shopSortNull">
          <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
          <div class="align-c mar-t-20 font-16 font-color-6">
            暂无分类~
          </div>
        </div>
      </div>
    </div>
    <div class="nodata" v-if="searchNull">
      <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
      <div class="align-c mar-t-20 font-16 font-color-6">
        暂时还没有您搜索的内容~
      </div>
    </div>
  </div>
</template>
<script>
import { pagingSellGoods, updateUpperShelfFlag } from '@/api/distribution'
export default {
  data() {
    return {
      paramsData: {
        memberId: '',
        keyword: '',
        currentPage: 1,
        size: 10
      },
      listData: [],
      pullLoad: {
        loading: false,
        finished: false
      },
      pageLoad: true,
      searchNull: false // 搜索数据是否为空
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    if (!this.pageLoad) {
      this.resetData()
      this.searchEvent()
    }
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.searchEvent()
    }
  },
  methods: {
    searchEvent() {
      this.paramsData.memberId = this.getCustomerId
      pagingSellGoods(this.paramsData).then(response => {
        if (response.isError) return
        response.data.records.forEach((item) => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.searchNull = true
        }
        this.paramsData.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
    },
    resetData() {
      // 重置数据
      this.searchNull = false
      this.paramsData.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
    },
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.paramsData.keyword = e.mp.detail
      this.resetData()
      this.searchEvent()
    },
    onChangeVal(e) {
      this.paramsData.keyword = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetData()
      this.searchEvent()
    },
    upperGoods(goods) {
      updateUpperShelfFlag({
        memberId: this.getCustomerId,
        goodsId: goods.goodsId,
        upperShelfFlag: 1
      }).then((response) => {
        if (response.isError) return
        this.$utils.showToast({ title: '操作成功' })
        setTimeout(() => {
          this.resetData()
          this.searchEvent()
        }, 500)
      }).catch(() => {
      })
    },
    pageTo(item) {
      // 跳转详情页 分销商品
      this.pageLoad = false
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30&upperShelfFlag=1'})
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: white;
}
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.main {
  .main-bar {
    position: relative;
    padding: 0 15px 20px;
    margin-top: 10px;
    .shop-bar {
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 10px 13px;
      box-shadow: 0 4px 10px #dddddd;
      margin-top: 10px;
      border-radius: 5px;
      &:first-child{
        margin-top: unset;
      }
      .img-item-box {
        width: 100px;
        height: 100px;
        .img-item {
          width: 100px;
          height: 100px;
        }
      }
      .content-item-box {
        width: 209px;
        height: 90px;
        padding: 5px 0;
        margin-left: 10px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .content-title {
          font-size: 14px;
          line-height: 18px;
          color: #333;
        }
        .content-foot {
          margin-top: 20px;
          .self-buy {
            height: 15px;
            text-align: center;
            display: flex;
            justify-content: left;
            align-items: center;
            .self-buy-left {
              background: #ffe200;
              font-size: 10px;
              color: #333;
              padding: 0 4px;
            }
            .self-buy-right {
              background: #000000;
              font-size: 10px;
              color: #fff;
              padding: 0 4px;
            }
          }
          .price-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .price-box {
              display: flex;
              justify-content: left;
              align-items: flex-end;
              .price {
                font-size: 19px;
                color: #ff0000;
                line-height: 1;
              }
              .old-parice {
                font-size: 12px;
                color: #333;
                text-decoration: line-through;
                margin-left: 5px;
                line-height: 1;
              }
            }
            .btn-box{
              .btn{
                width: 65px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                border-radius: 3px;
                border: 1px solid #333;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .nodata {
      margin-top: 135px;
    }
  }
}
.nodata {
  margin-top: 115px;
}
</style>
